<template>
    <div class="apiSearchContainer">
        <span class="inputLabel">容器名称</span>
        <el-input v-model="serviceContainerSearchData.dockerName" placeholder="容器名称" class="searchInfoInput"></el-input>

        <span class="inputLabel">容器ID</span>
        <el-input v-model="serviceContainerSearchData.dockerContainerId" placeholder="容器ID" class="searchInfoInput"></el-input>

        <span class="inputLabel">所属微服务</span>
        <el-select v-model="serviceContainerSearchData.serviceId" placeholder="微服务" class="searchInfoInput" clearable>
            <el-option :label="item.applicationName" :value="item.id" v-for="item in applicationList" :key="item.id"/>
        </el-select>

        <el-button type="primary" icon="SearchOutlined" :loading="searchLoading" class="searchButtonClass" @click="queryApiInfo()">搜索</el-button>
        <el-button icon="RedoOutlined" @click="resetInput()">重置</el-button>
    </div>
</template>

<script name="ContainerSearch" setup lang="ts">
import {applicationInfoQuery} from "@/request/service";
import {containerInfoQuery} from "@/request/container";
import {computed, ref} from "vue";
import {useServiceContainerStore} from "@/stores/container/container";

let container = ref({
    serviceId: '',
    dockerContainerId: '',
    dockerName: ''
});
let applicationList = ref([]);
let searchLoading = ref(false);

let serviceContainerSearchData = computed(() => {return useServiceContainerStore().serviceContainerSearchData});

// 查询
applicationInfoQuery({}).then(res => {
    if (res["code"] === '200') {
        applicationList.value = res.data;
    }
})

function queryApiInfo() {
    searchLoading.value = true
    containerInfoQuery(serviceContainerSearchData.value).then(res => {
        if (res["code"] === '200') {
            applicationInfoQuery({}).then(applicationRes => {
                if (applicationRes["code"] === '200') {
                    let dataInfo = res.data
                    dataInfo.forEach(data => {
                        let applicationInfo = applicationRes.data.filter(appRes => {return data.serviceId === appRes.id})
                        data.applicationName = applicationInfo[0].applicationName;
                    })
                    useServiceContainerStore().resetServiceContainerDataList(dataInfo);
                }
            })
        }
        searchLoading.value = false
    }).catch(res => {
        searchLoading.value = false
    })
}

function resetInput() {
    useServiceContainerStore().resetServiceContainerSearchData({});
}
</script>

<style scoped lang="less">
.apiSearchContainer {
    width: 100%;
    height: 10%;
    .searchInfoInput {
        width: 15%;
        padding-left: 1%;
    }
    .inputLabel {
        padding-left: 1%;
        font-weight: 700;
        font-size: 15px;
        color: #606266;
    }
    .searchButtonClass {
        margin-left: 1%;
    }
}
</style>